<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <view class="flex items-center">
        <uni-icons type="wifi-filled" size="22" color="#333333" class="mr-2"></uni-icons>
        <uni-icons type="battery" size="22" color="#333333"></uni-icons>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-left" @tap="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-bar-title">个人资料</view>
      <view class="nav-bar-right"></view>
    </view>
    
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 头像 -->
      <view class="profile-item" @tap="changeAvatar">
        <text class="item-label">头像</text>
        <view class="item-content avatar-content">
          <image 
            class="avatar-image" 
            :src="userInfo.avatar || 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=120&q=80'" 
            mode="aspectFill"
          ></image>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      
      <!-- 昵称 -->
      <view class="profile-item" @tap="editNickname">
        <text class="item-label">昵称</text>
        <view class="item-content">
          <text class="item-value">{{ userInfo.nickname }}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      
      <!-- 手机号 -->
      <view class="profile-item">
        <text class="item-label">手机号</text>
        <view class="item-content">
          <text class="item-value">{{ formatPhone(userInfo.phone) }}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
      
      <!-- 生日 -->
      <view class="profile-item" @tap="editBirthday">
        <text class="item-label">生日</text>
        <view class="item-content">
          <text class="item-value">{{ userInfo.birthday }}</text>
          <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 用户信息
const userInfo = ref({
  avatar: 'https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?w=240&q=80',
  nickname: '王先生',
  phone: '13812348888',
  birthday: '1990-01-01'
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 格式化手机号，中间四位显示为星号
const formatPhone = (phone: string) => {
  if (!phone) return '';
  if (phone.length < 7) return phone;
  return phone.substring(0, 3) + '****' + phone.substring(7);
};

// 更换头像
const changeAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      
      // 这里只是在前端更新头像，实际应用中应该上传到服务器
      userInfo.value.avatar = tempFilePath;
      
      // 模拟上传成功提示
      uni.showToast({
        title: '头像更新成功',
        icon: 'success'
      });
    }
  });
};

// 编辑昵称
const editNickname = () => {
  uni.showModal({
    title: '修改昵称',
    editable: true,
    content: userInfo.value.nickname,
    placeholderText: '请输入新昵称',
    success: (res) => {
      if (res.confirm && res.content.trim()) {
        userInfo.value.nickname = res.content.trim();
        uni.showToast({
          title: '昵称修改成功',
          icon: 'success'
        });
      }
    }
  });
};

// 编辑生日
const editBirthday = () => {
  uni.showToast({
    title: '暂不支持修改生日',
    icon: 'none'
  });
  
  // 实际应用中应该打开日期选择器
  // uni.datePicker({
  //   ... 相关配置
  // });
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 101;
}

.nav-bar {
  height: 88rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: sticky;
  top: 44px;
  z-index: 100;
}

.nav-bar-left {
  width: 80rpx;
  display: flex;
  align-items: center;
}

.nav-bar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.nav-bar-right {
  width: 80rpx;
}

.content-area {
  flex: 1;
  padding: 20rpx 0;
}

.profile-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.item-label {
  font-size: 28rpx;
  color: #333;
}

.item-content {
  display: flex;
  align-items: center;
}

.item-value {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.avatar-content {
  display: flex;
  align-items: center;
}

.avatar-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 10rpx;
  background-color: #f0f0f0;
}
</style> 